<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css处理内容溢出</title>
    <style>
        #d1 {
            width: 400px;
            height: 200px;
            background-color: skyblue;
            overflow: auto; /*hidden截断，auto，不溢出没有滚动条，溢出则有滚动条，scroll一定会有滚动条*/
        }

        #d2 {
            width: 1000px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <!-- /* 纵向溢出 */ -->
    <div id="d1">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repudiandae nemo quia saepe, dolore ut
        dolores atque iste beatae minus debitis magnam recusandae nostrum vel unde quos fugit quas, doloribus iure optio
        voluptatem similique 
        <div id="d2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam molestias sapiente quisquam! Blanditiis libero deleniti accusamus tempora, non unde magnam natus labore veritatis odio voluptatum consequuntur rem voluptatibus veniam placeat.</div>eos modi, eveniet labore. Iure suscipit, dolor officiis earum corporis, iste blanditiis
        quibusdam asperiores nobis, excepturi veritatis id magnam? Sequi dolores saepe vitae molestiae sit voluptatum
        aut ipsam, vero nemo nisi molestias non labore voluptatem, fugit officia. In omnis quos placeat modi! Facilis
        animi eaque molestiae numquam repellat, reprehenderit molestias laboriosam ut, possimus neque dolore dicta
        exercitationem consequatur ipsa impedit vitae magnam nostrum mollitia rem? Natus, temporibus!</div>
</body>

</html>